import createModulePage from "../../../components/modulepage/index";
import { KxAppSubModule} from "../submodule";
import { HttpTaskTraits } from "../traits/http";

import { genForm, genFormValidate } from "../../../../ui/form/validate";
import { defineFormRules, resetForm } from "../../../../ui/form/form";
import { createFormGroup } from "../../../components/form/index";

import { AUICheckboxGroup } from "../../../../ui/form/checkboxgroup.component";

import { AUIRadioGroup } from "../../../../ui/form/radiogroup.component";

import { pageName, refName, typeOptions, checkboxOptions, radioOptions } from "./variable";

AUICheckboxGroup.install();

AUIRadioGroup.install();

export var formField = {
    "name1": {
        validate: {
            presence: true,
        }
    },
    "name2": {
        validate: {
            presence: true,
        }
    },
    "name3": {
        validate: {
            presence: true,
        },
        attr: {
            value: []
        }
    },
    "name4": {
        validate: {
            presence: true,
        }
    },
};

var formtools = `
     <h5>工具方法</h5>
     <div>
     <table>
     <tbody>
     <tr><th>方法名</th><th>功能</th><th>演示</th></tr>
     <tr><td>resetForm</td><td>恢复form到初始值</td><td>
<pre><code class="language-js">import { resetForm } from "../../../../ui/form/form"; 
resetForm(self.form)</code></pre>      
</td></tr>
</tbody>
</table>
</div> 
`;

class Module extends KxAppSubModule {
    constructor(name) {
        super(name);
    }
    _template() {
        var self = this;
        return `<div class="${self._name}">
    <div ref="${refName}" class="action app-action">
    </div>  
    <h5>依赖</h5>
    <pre><code class="language-js">import { genForm, genFormValidate } from "../../../../ui/form/validate";
import { defineFormRules, resetForm } from "../../../../ui/form/form";
import { createFormGroup } from "../../../components/form/index";</code></pre>
    <h5>Formfield</h5>
    <pre><code class="language-js">// 验证规则参考 http://validatejs.org/    
var formField = {
    "name1": {
        validate: {
            presence: true             // 验证规则 相当于 required
        },
        attr: {
            value: 1                   // 默认值
        }
    }
};</code></pre>   
    <h5>调用方法</h5>     
    <pre><code class="language-js">_data() {
    var ret = {};
    ret.formFields = defineFormRules(formField);
    ret.form = genForm(ret.formFields, Object.keys(ret.formFields));
    return ret;
}

_mounted() {        
    var self = this;         
    genFormValidate(self, "form");
}</code></pre>       
     <h5>属性</h5>
     <div>
     <table>
     <tbody>
     <tr><th>属性名</th><th>功能</th><th>演示</th></tr>
     <tr><td>errorLength</td><td>得到当前错误数</td><td>
<pre><code class="language-js">self.form.errorLength</code></pre>      
</td></tr>
</tbody>
</table>
</div> 
     <h5>form方法</h5>
     <div>
     <table>
     <tbody>
     <tr><th>方法名</th><th>功能</th><th>演示</th></tr>
     <tr><td>setDataByMap</td><td>设置form data</td><td>
<pre><code class="language-js">self.form.setDataByMap({
    name1: 1
})</code></pre>      
</td></tr>
    <tr><td>resetValidateAll</td><td>恢复验证到默认状态</td><td>
<pre><code class="language-js">self.form.resetValidateAll()</code></pre>      
</td></tr>
    <tr><td>validateAll</td><td>验证</td><td>
<pre><code class="language-js">self.form.validateAll() -> errors</code></pre>      
</td></tr>
</tbody>
</table>
</div> 
    ${formtools}     
    <h5>Input</h5>
    <div>{{form.data.name1.value}}</div>
${createFormGroup("name1",
            `:aui-required="form.constraints.name1.presence"`,
            `label1`,
            `
<input class="aui-form-control" type="text"
v-model="form.data.name1.value"            
v-input-validate="form.element.name1">
`,
            ``,
            ``
        )}         
     <h5>Select</h5>
     <div>{{form.data.name2.value}}</div>
     ${createFormGroup("name2",
            `:aui-required="form.constraints.name2.presence"`,
            `label2`,
            `
<aui-select class="aui-select--default" ref="typeSelect"
v-model="form.data.name2.value"           
></aui-select>
`,
            ``,
            ``
        )}
    <pre><code class="language-js">// setOptions 设置options
// options 通用格式
/**
*   {
*       label: "",
*       value: "",
*       selected: false (Optional)
*   }
**/    
self.$refs.typeSelect.setOptions(typeOptions);
self.$refs.typeSelect.setSelectedIndex(0);</code></pre>    
    <h5>Checkbox</h5>   
    <div>{{form.data.name3.value}}</div>
    ${createFormGroup("name3",
            `:aui-required="form.constraints.name3.presence"`,
            `label3`,
            `
<aui-checkbox-group ref="checkboxSelect" 
    name="name3" v-model="form.data.name3.value"></aui-checkbox-group>
`,
            `
            `,
            ''
        )}
    <pre><code class="language-js">// setCheckboxs 设置checkboxs
// checkboxs 通用格式
/**
*   {
*       label: "",
*       value: "",
*       selected: false (Optional)
*   }
**/    
self.$refs.checkboxSelect.setCheckboxs(checkboxOptions);</code></pre>
    <h5>Radio</h5>   
    <div>{{form.data.name4.value}}</div>
    ${createFormGroup("name4",
            `:aui-required="form.constraints.name4.presence"`,
            `label3`,
            `
<aui-radio-group ref="radioSelect" 
    name="name4" v-model="form.data.name4.value"></aui-radio-group>
`,
            ``,
            ''
        )}
</div>`;
    }   
    
    _traits(instance) {
        return [ 
            new HttpTaskTraits(instance, `private_${pageName}_traits`) 
        ]
    }

    _mounted() {        
        var self = this;         
        self[`private_${pageName}_traits`].init({
            onError: function (error) {
                if (self.$refs[refName]) {
                    window.app.onError(error)
                }
            }
        });

        self.$refs.typeSelect.setOptions(typeOptions);
        self.$refs.typeSelect.setSelectedIndex(0);

        self.$refs.checkboxSelect.setCheckboxs(checkboxOptions);

        self.$refs.radioSelect.setRadios(radioOptions);
        self.$refs.radioSelect.setSelectedIndex(0);

        genFormValidate(self, "form");

        setTimeout(function () {
            self.search();
        }, 0);

        window.AUIPrism.highlightAll();
    }
    _methods(instance) {
        return {
            search(page = 1) {
                var self = this;
            },
            onSearch(data) {
                var self = this;
                self.search();
            },
            onPageChange(page) {
                var self = this;
                self.search(page);
            }
        }
    }
    _data() {
        var ret = {};
        ret.formFields = defineFormRules(formField);
        ret.form = genForm(ret.formFields, Object.keys(ret.formFields));
        return ret;
    }  
}


window.AUICustomComponents.define(`kx-app-${pageName}-module`, Module);

export default createModulePage(
    `<kx-app-${pageName}-module></kx-app-${pageName}-module>`
);